/**
* Created by 周翔 on 2017/3/30.
*/
<template>
  <div>

    <el-table ref="fundInfoTable" :data="getFundInfo" height="500" border :stripe="true" :highlight-current-row="true"
               current-row-key="id" style="width: 100%">
      <el-table-column type="index" width="100"/>
      <el-table-column prop="fundCode" width="150" label="基金编号" />
      <el-table-column prop="fundName" min-width="200" label="基金名称"/>
      <el-table-column prop="shortName" label="名称缩写" width="150"/>
      <el-table-column prop="fundStatus" label="基金状态" width="150" :formatter="formatterStateHandler"/>
      <el-table-column prop="fundType" width="150" label="基金类型" :formatter="formatterTypeHandler"/>
      <el-table-column prop="fundTypeName" width="150" label="聚源基金类型名"/>
      <el-table-column prop="fundTypeCode" width="150" label="聚源基金类型编号"/>
      <el-table-column prop="createDate" label="创建日期" width="200" />
      <el-table-column prop="lastUpdatedDate" label="最后更新日期" width="200" />
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="getFundInfoCurrentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="getFundInfoTotalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script type="text/babel">
  import { mapActions, mapGetters } from 'vuex'
  import fundInfoStore from './bll/fundInfoStore'
  import store from '../../store'
  (!store.state.sysFundInfor) && store.registerModule('sysFundInfor', fundInfoStore)

  export default{
    data() {
      return {
        pageSize: 10,
        state: {
          '0': '正常开放',
          '1': '认购时期',
          '2': '停止赎回',
          '3': '停止申购',
          '4': '封闭期',
          '5': '停止交易',
          '6': '基金终止',
          '7': '权益登记',
          '8': '红利发放',
          '9': '发行失败',
          'a': '非本机构代销',
          'b': '发行成功',
          'z': '转认购期'
        },
        type: {
          '0': '普通型',
          '1': '股票型',
          '2': '货币型',
          '3': '偏股型',
          '4': '股债平衡型',
          '5': '偏债型',
          '6': '偏券型',
          '7': '保本型',
          '8': '指数型',
          '9': '短债型',
          'a': 'QDⅡ',
          'b': '混合基金',
          'c': '券商理财',
          'd': '牛熊宝',
          'e': '现金产品',
          'f': '一对多产品',
          'g': '短期理财产品',
          'h': '封闭式T+0',
          'i': '保证金理财',
          'j': '现金产品',
          'k': '一对多产品',
          'l': '短期理财产品',
          'm': 'ETF',
          'n': '专户产品',
          'o': 'LOF'
        }
      }
    },

    computed: {
      ...mapGetters(['getFundInfo', 'getFundInfoCurrentPage', 'getFundInfoTotalCount'])
    },

    components: {},

    mounted() {
      this.initPage();
    },
    methods: {
      ...mapActions(['querySysFundInfo', 'querySysFundInfoCount']),

      initPage() {
        console.log('[Banner Page] mounted');
        this.querySysFundInfo();
        this.querySysFundInfoCount();
      },
      formatterStateHandler (row, column) {
        switch (column.property) {
          case 'fundStatus':
            return this.state[row.fundStatus]
        }
        return 'Unkown key'
      },
      formatterTypeHandler (row, column) {
        switch (column.property) {
          case 'fundType':
            return this.type[row.fundType]
        }
        return 'Unkown key'
      },
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val;
        this.querySysFundInfo({pageIndex: 1, pageSize: val});
      },
      handleCurrentChange (val) {
        console.log(arguments);
        console.log(`current${val}`);
        this.querySysFundInfo({pageIndex: val, pageSize: this.pageSize});
      }
    }
  }
</script>
